<template>
  <div class="container">
    <div class="yc-form">
      <page-search :config="formConfig" :btnConfig="btnConfig" @click="handlerClick"></page-search>
    </div>
    <div class="yc-table">
      <pageContent
        page-name="user"
        :contentConfig="contentConfig"
        ref="pageContentRef"
        @header-handler-click="handleNewData"
        @edit-click="editClick"
      >
        <template #status="scoped">
          <el-button
            size="small"
            :type="scoped.prop.enable == 1 ? 'warning' : 'primary'"
            @click="statusClick(scoped.prop)"
            >{{ statusButton(scoped.prop.enable) }}</el-button
          >
        </template>
      </pageContent>
    </div>
    <div class="page-modal">
      <yc-dialog
        :config="dialogConfigRef"
        :modalConfig="defaultInfo"
        :dialog-title="dialogTitle"
        ref="dialogRef"
        page-name="user"
      >
      </yc-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useStore } from '@/store'
import { formConfig, btnConfig } from './config/search-config'
import { contentConfig } from './config/table-config'
import { dialogFormConfig } from './config/dialog-config'

import pageSearch from '@/base-ui/page-search'
import pageContent from '@/base-ui/page-content'
import ycDialog from '@/base-ui/dialog'

import { usePageSeach } from '@/hooks/usePageSeach'
import { usePageDialog } from '@/hooks/usePageDialog'

const store = useStore()
//form hook
const [pageContentRef, handlerClick] = usePageSeach()

/*
  处理密码逻辑
  控制编辑按钮时弹框没有输入密码选项
  新建用户的时候弹框显示输入密码选项
*/
function newCallBack() {
  const passwordItem = dialogFormConfig.formConfig.find((item) => item.field === 'password')
  passwordItem!.isHidden = false
}
function editCallBack() {
  const passwordItem = dialogFormConfig.formConfig.find((item) => item.field === 'password')
  passwordItem!.isHidden = true
}
/*
  dialog hook
*/
const { handleNewData, editClick, defaultInfo, dialogRef, dialogTitle } = usePageDialog(
  newCallBack,
  editCallBack
)

/*
  todo
   动态添加部门管理和角色列表
   这里使用computed来使dialogFormConfig响应 不这样写会存在页面单独刷新是 setup函数不会重新刷新
*/
const dialogConfigRef = computed(() => {
  const departmentItem = dialogFormConfig.formConfig.find((item) => item.field === 'departmentId')
  departmentItem!.options = store.state.entireDepartment.map((item) => {
    return {
      label: item.name,
      value: item.id
    }
  })

  const roleItem = dialogFormConfig.formConfig.find((item) => item.field === 'roleId')
  roleItem!.options = store.state.entireRole.map((item) => {
    return {
      label: item.name,
      value: item.id
    }
  })

  return dialogFormConfig
})
const statusButton = (status: number) => {
  return status === 1 ? '禁用' : '启用'
}
function statusClick(row: any) {
  row.enable == 1 ? (row.enable = 0) : (row.enable = 1)
}
</script>

<style lang="less" scoped>
.container {
  .yc-form {
    padding-top: 22px;
    .title {
      padding: 10px 0px;
      font-size: 20px;
    }
  }
}
</style>
